<template>
    <div @click="toggleClick">
        <el-icon
            :class="{
                'is-active': isActive
            }"
            class="hamburger"
            size="30"
        >
            <inconify icon="ant-design:menu-fold-outlined" />
        </el-icon>
    </div>
</template>

<script setup name="Hamburger">
import { Icon as inconify } from '@iconify/vue'
const props = defineProps({
    isActive: {
        type: Boolean,
        default: false
    }
})
// 定义可以触发的事件
const emit = defineEmits(['toggleClick'])
function toggleClick() {
    //选项式api中this.$emit 是一个实例方法，用于子组件向父组件触发事件
    emit('toggleClick')
}
</script>

<style scoped>
.hamburger {
    display: inline-block;
    margin-left: 5px;
    vertical-align: middle;
}
.hamburger.is-active {
    transform: rotate(180deg);
}
</style>
